<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../common/top.jsp" %>

<link rel="stylesheet" href="css/shop.css">
<style>
    @font-face {
        font-family: 'cm';
        src: url("font/Begilas.otf");
    }

    @font-face {
        font-family: 'huayuan';
        src: url("font/花园肉丸.ttf");
    }

    #BackLink {
        margin: 0 auto;
        position: absolute;
        left: 50%;
        top: 94%;
        transform: translate(-50%, -50%);
    }

    .refreshButton {
        width: 20px;
        height: 20px;
        margin-left: 20px;
        background-image: url(img/refresh.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-color: inherit;
        border: none;
    }

    td input {
        width: 30px;
        text-align: center;
    }

    /*.quantityOpe {*/
    /*    background-color: transparent;*/
    /*    width: 20px;*/
    /*    height: 20px;*/
    /*    border-radius: 50%;*/
    /*    text-align: center;*/
    /*    border: 1px solid black;*/
    /*}*/
</style>

<div class="display">
    <h2>Shopping Cart</h2>
    <div id="Cart">
        <form action="updateCart" method="post">
            <table>
                <tr>
                    <%--                    <th><b>Item ID</b></th>--%>
                    <%--                    <th><b>Product ID</b></th>--%>
                    <th><b>Description</b></th>
                    <%--                    <th><b>In Stock?</b></th>--%>
                    <th><b>Quantity</b></th>
                    <th><b>List Price</b></th>
                    <th><b>Total Cost</b></th>
                    <th>&nbsp;</th>
                </tr>

                <c:if test="${sessionScope.cart.numberOfItems == 0}">
                    <tr>
                        <td colspan="8"><b>Your cart is empty.</b></td>
                    </tr>
                </c:if>

                <c:forEach var="cartItem" items="${sessionScope.cart.cartItems}">
                    <tr>
                            <%--                        <td>${cartItem.item.itemId}</td>--%>
                            <%--                        <td>${cartItem.item.product.productId}</td>--%>
                        <td>${cartItem.item.attribute1} ${cartItem.item.attribute2}
                                ${cartItem.item.attribute3} ${cartItem.item.attribute4}
                                ${cartItem.item.attribute5} ${cartItem.item.product.name}</td>
                            <%--                        <td>${cartItem.inStock}</td>--%>

                        <td>
                                <%--                            <button class="quantityOpe" id="QuantityMinus">-</button>--%>
                            <input type="text" name="${cartItem.item.itemId}" value="${cartItem.quantity}"
                                   class="quantityNum">
                                <%--                            <button class="quantityOpe" id="QuantityPlus">+</button>--%>
                        </td>

                        <td><fmt:formatNumber value="${cartItem.item.listPrice}"
                                              pattern="$#,##0.00"/></td>
                        <td><p id="${cartItem.item.itemId}" style="display: inline-block;">
                            <fmt:formatNumber value="${cartItem.total}" pattern="$#,##0.00"/></p></td>
                        <td><a href="removeCartItem?workingItemId=${cartItem.item.itemId}" class="Button">Remove</a>
                        </td>
                    </tr>
                </c:forEach>
                <tr>
                    <td colspan="8">
                        Sub Total: <P id="subtotal" style="display: inline-block;">
                        <fmt:formatNumber value="${sessionScope.cart.subTotal}" pattern="$#,##0.00"/></P>
                        <button type="submit" class="refreshButton"></button>
                    </td>
                </tr>
            </table>
        </form>
    </div>

    <c:if test="${sessionScope.cart.numberOfItems > 0}">
        <div id="draw-border">
            <a href="newOrderForm" class="ButtonNext"
               style="font-family: huayuan;position: relative;left: 160px;">
                <button>提交订单</button>
            </a>
        </div>
    </c:if>

    <div id="Separator">&nbsp;</div>

    <div id="BackLink">
        <a href="productForm?productId=${sessionScope.product.productId}">
            <button onclick="back()"><span>返回</span></button>
        </a>
    </div>
</div>

<div id="MyList">
    <c:if test="${sessionScope.loginAccount.listOption}">
        <%@ include file="includeMyList.jsp" %>
    </c:if>
</div>

<script src="jQuery.min.js"></script>
<script>
    $(function () {
        $('.quantityNum').on('keyup', function () {
            var num = $(this).val();
            var id = this.name;
            console.log(num);

            $.ajax({
                type: "GET", url: "changeCartServlet",
                data: {
                    id: id,
                    quantity: num,
                },
                success: function (data) {
                    console.log(data);
                    var json = eval("(" + data + ")");
                    var itemTotal = json.data1;
                    var subTotal = json.data2;
                    $('#'+id).html("$" + itemTotal);
                    $('#subtotal').html("$" + subTotal);
                }
            })
        })
    })
</script>



